<template>
  <div class="my-new-finance">
    <v-dialog title="新建应收" :show.sync="dialogVisible" @beforeClose="beforeClose" width="1200px">
      <div class="card-box">
        <div class="data-title">基本信息</div>
        <el-form ref="editForm" :model="form" class="form-wrap" size="small" :rules="rules">
          <el-form-item label="收费项目" prop="chargeProjectName">
            <el-select v-model="form.chargeProjectName" @change="selectOne" placeholder="请选择">
              <el-option v-for="item in charge_project_type" :key="item.label" :label="item.label" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="关联合同" prop="contractName">
            <el-select v-model="form.contractName" @change="selectContract" filterable allow-create default-first-option placeholder="请选择合同">
              <el-option v-for="(item,index) in rentContractList" :key="index" :label="item.contractName" :value="index"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="关联物业" prop="projectName">
            <el-input disabled="disabled" v-model="form.projectName"></el-input>
          </el-form-item>

          <el-form-item label="收费对象" prop="costProjectName">
            <el-input disabled="disabled" v-model="form.costProjectName"></el-input>
          </el-form-item>

          <el-form-item label="本次应收金额" prop="receivableMoney">
            <el-input v-model="form.receivableMoney"></el-input>
          </el-form-item>

          <el-form-item label="费用周期" prop="costPeriodArr">
            <el-date-picker
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model.trim="form.costPeriodArr"
              format="yyyy-MM-dd"
              valueFormat="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="应收日期" prop="receivableDate">
            <el-date-picker v-model="form.receivableDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="税率更新时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="其他编号" prop="billNumber">
            <el-input v-model="form.billNumber" aria-valuemax="5"></el-input>
          </el-form-item>

          <el-form-item label="备注" class="full" prop="remarks">
            <el-input v-model="form.remarks" type="textarea" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="data-title">上传文件</div>
        <file-up-loud
          type="file"
          ref="receivable"
          :url="fileUploadUrl"
          @onSuccess="onSuccess"
          @onError="onError"
          @beforeUpload="beforeUpload"
          @handleClean="handleClean"
          :propsFileList="uploadFileList"
          :isShowFileList="true"
          :loadFileList="fileList"
          :isView="false"
        >costPeriodArr</file-up-loud>
      </div>
      <span slot="foot">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button v-throttle=" [commit]">提 交</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import { addObj, rentContractList, putObj } from '../../../api/finance-collection-receivable'
import BaseLoad from '@/assets/vue-mixin/BaseLoad'
import fileUpLoud from '@/components/upload-media'
import { doubleValidate } from '~/utils/validate.js'
import { mapState } from 'vuex'

export default {
  mixins: [BaseLoad],
  components: { engineerList, fileUpLoud },

  data () {
    return {
      rentContractList: [],
      fileUploadUrl: '/admin/sys-file/upLodeFileEdit',
      uploadFileList: [],
      fileList: [],
      fileSize: 50,
      modelType: 'finance',
      busIdPropertyName: 'receivableId',
      formData: {},
      input: '',
      value: '',
      area: [],
      form: {
        rentContractId: '',
        receivableId: '',
        //chargeProject: '',
        projectName: '',
        contractName: '',
        receivableMoney: '',
        costProjectName: '',
        costPeriodStart: '',
        costPeriodEnd: '',
        receivableDate: '',
        billNumber: '',
        chargeProjectId: '',
        chargeProjectName: '',
        taxAmount: '',
        remarks: '',

        costPeriodArr: [],
      },
      selectDataArr: [],
      dialogVisible: false,
      isEdit: false,
      rules: {
        chargeProjectName: [{ required: true, message: '请选择收费项目', trigger: 'blur' }],
        //projectName: [{required: true, message: '请输入关联物业', trigger: 'blur'}],
        contractName: [{ required: true, message: '请选择关联合同', trigger: 'blur' }],
        receivableMoney: [{ required: true, message: '请输入本次应收金额', trigger: 'blur' },
        { validator: doubleValidate, trigger: "change" },],
        costPeriodArr: [{ required: true, message: '请输入费用周期', trigger: 'blur' }],
        receivableDate: [{ required: true, message: '请输入应收日期', trigger: 'blur' }],
        billNumber: [
          { max: 50, message: '票据编号不得超过50个字符', trigger: 'blur' }],
        remarks: [{ max: 500, message: '备注不得超过500个字符', trigger: 'blur' }],
        //costProjectName: [{required: true, message: '请输入收费对象', trigger: 'blur'}]
      }
    }
  },
  computed: {
    ...mapState({
      charge_project_type: state => {
        let data = state.dict.find(item => item.type === "charge_project_type") || {}
        let list = data.children || []
        return data.children || []
      },
    })
  },
  methods: {
    show () {
      this.dialogVisible = true
      setTimeout(() => {
        this.isEdit = false
        this.$refs.editForm.resetFields()
        rentContractList().then(resp => {
          this.rentContractList = resp.data.data;
        })

      }, 200)
    },
    selectOne (item) {
      this.form.chargeProjectId = item.value
      this.form.chargeProjectName = item.label
    },
    commit () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.form.costPeriodStart = this.form.costPeriodArr[0]
          this.form.costPeriodEnd = this.form.costPeriodArr[1]
          this.$refs.receivable.submit(this.modelType, this.busId);
          // this.dialogVisible = false
        }
      })
    },
    selectContract (val) {
      let rentContract = this.rentContractList[val]
      this.form.costProjectName = rentContract.customerName
      this.form.costProjectId = rentContract.customerId
      this.form.projectName = rentContract.propertyNames
      this.form.rentContractId = rentContract.rentContractId
    },
    onSuccess (rep, file, fileList) {
      //文件上传成功，开始保存表单
      this.loadClose()
      if (rep.data) {
        this.sendFormData(rep.data)
      } else {
        this.loadClose()
        this.err('提交失败')
      }
    },

    onError (err, file, fileList) {
      this.loadClose()
      this.err('提交失败')
    },

    beforeUpload () {
      this.loadAction('请稍等...')
    },
    selectionChange (val) {
      this.selectDataArr = val
    },
    sendFormData (val) {
      this.loadAction('请稍等...')
      this.form.receivableId = val
      addObj(this.form).then(resp => {
        if (resp.data.data) {
          this.suc('添加成功')
          // this.resetList()
          // this.dialogVisible = false
          this.$refs.editForm.resetFields()
          this.handleCancel()
          this.loadClose()
          this.$emit('resetList')
          // console.log('添加成功添加成功添加成功')
        } else {
          this.err('添加失败')
          this.loadClose()
        }
      })
      //commit()
    },
    handleClean (file) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delFiles(file.fileId, this.modelType).then(resp => {
          if (resp.data.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fileList = this.fileList.filter(file => file.fileId != fileId)
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleEmpty () {
      //this.form = {}
      this.form.rentContractId = '',
        this.form.receivableId = '',
        this.form.projectName = '',
        this.form.contractName = '',
        this.form.receivableMoney = '',
        this.form.costProjectName = '',
        this.form.costPeriodStart = '',
        this.form.costPeriodEnd = '',
        this.form.receivableDate = '',
        this.form.billNumber = '',
        this.form.chargeProjectName = '',
        this.form.taxAmount = '',
        this.form.remarks = '',
        this.form.costPeriodArr = []
    },
    handleCancel () {
      this.dialogVisible = false
      this.handleEmpty()
    },
    // hxf-0901-关闭弹框
    beforeClose (done) {
      done()
    },
  }
}
</script>

<style lang='scss'>
.my-new-finance {
  @include data-title();
}
.el-loading-mask.is-fullscreen {
  z-index: 3000 !important;
}
@include info-list(2);
@include formWrap(3);
</style>
